<route type="page" lang="json5">
{
  style: { navigationStyle: 'custom' }
}
</route>
<template>
  <view class="full-page" :style="{ paddingTop: safeArea.top + 'px', paddingBottom: safeArea.bottom + 'px' }">

    <wd-tabs v-model="tab" @change="handleTabChange">
      <block v-for="item in tabs" :key="item">
        <wd-tab :title="`${item}`" :name="item">
          <view
            class="order-card"
            v-for="order in filteredOrderList"
            :key="order.orderId"
            @click="toPickUp(order.orderId)"
          >
            <view class="order-cell">
              <view class="order-title">
                {{
                  order.orderStatus === '0'
                    ? '已下单'
                    : order.orderStatus === '1'
                      ? '制作中'
                      : order.orderStatus === '2'
                        ? '请取餐'
                        :order.orderStatus === '3'?'已完成':''
                }}
              </view>
            </view>
            <view class="image-container">
              <view class="image-scroll" :style="{ transform: `translateX(-${scrollX}px)` }">
                <view v-for="(goods, index) in order.workOrders" :key="index" class="image-item">
                  <image :src="goods.goodsImgUrl" class="image" mode="aspectFill"></image>
                </view>
              </view>
            </view>
            <view class="order-total-price">
              <text>价格</text>
              <text>￥{{ order.orderPrice }}</text>
            </view>
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store'
import { OrderInfoVO } from '@/api/order/orderInfo'
import { getMemberOrderInfo, getOrderInfoApi } from '@/api/order/api'

const safeArea = ref({
  top: 0,
  bottom: 0
})

const tabs = ref(['全部', '制作中', '请取餐','已完成'])
const tab = ref('全部') // 初始选中的标签

const memberId = ref()

const orderList = ref<OrderInfoVO[]>([])
const filteredOrderList = ref<OrderInfoVO[]>([])

onLoad(option => {
  getOrderInfo()
})

onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  // 设置安全区域信息
  safeArea.value = {
    top: systemInfo.safeAreaInsets.top,
    bottom: systemInfo.safeAreaInsets.bottom
  }
  getUserStoreUser()
  getOrderInfo()

  const imageScroll = document.querySelector('.image-scroll') as HTMLElement
  if (imageScroll) {
    imageScroll.addEventListener('touchstart', touchstart)
    imageScroll.addEventListener('touchmove', touchmove)
    imageScroll.addEventListener('touchend', touchend)
  }
})


const getOrderInfo =()=> {
  getMemberOrderInfo(memberId.value).then(res => {
    console.log(res.data)
    orderList.value = res.data
    handleTabChange({ name: tab.value }) // 初始化筛选数据
  })
}


//获取当前用户信息
const userStore = useUserStore()
const getUserStoreUser = () => {
  memberId.value = userStore.getUserInfo().user.userId
}


const handleTabChange = (event: { name: string }) => {
  switch (event.name) {
    case '全部':
      filteredOrderList.value = orderList.value
      break
    case '制作中':
      filteredOrderList.value = orderList.value.filter(order => order.orderStatus === '1')
      break
    case '请取餐':
      filteredOrderList.value = orderList.value.filter(order => order.orderStatus === '2')
      break
    case '已完成':
      filteredOrderList.value = orderList.value.filter(order => order.orderStatus === '3')
      break
  }
}

const toPickUp = orderId => {
  // 当前页面跳转逻辑
  uni.navigateTo({
    url: '/pages/order/pick-up?orderId=' + orderId
  })
}

// 滚动条位置
const scrollX = ref(0)

// 记录触摸开始的位置
let startX: number

// 触摸开始事件
const touchstart = (e: TouchEvent) => {
  startX = e.touches[0].clientX
}

// 触摸移动事件
const touchmove = (e: TouchEvent) => {
  if (startX === undefined) return
  const moveX = e.touches[0].clientX
  const offsetX = moveX - startX
  scrollX.value += offsetX
  startX = moveX
}

// 触摸结束事件
const touchend = () => {
  startX = undefined
}
</script>

<style lang="scss" scoped>
html,
body {
  margin: 0;
  padding: 0;
}
/* 设置根元素的背景颜色 */
.full-page {
  background-color: #fbece5;
  min-height: 100vh;
}
.content {
  line-height: 120px;
  text-align: center;
}

:deep() {
  .wd-tabs__line {
    background-color: #f69947;
  }

  .uni-app--showtabbar uni-page-wrapper::after {
    height: 100%;
    background-color: #fbece5;
  }

  .wd-tabs__container {
    background-color: #fbece5;
  }
}

.image-container {
  overflow: auto; /* 显示滚动条 */
}

.image-scroll {
  display: flex;
  white-space: nowrap;
  transition: transform 0.3s ease;
}

.order-card {
  margin: 15rpx;
  padding: 15rpx;
  font-size: 90%;
  background-color: #fbece5;
  border-radius: 100rpx;
}

.order-title {
  background-color: #fdfaf0;
  padding: 15rpx;
}

.order-total-price {
  background-color: #fdfaf0;
  padding: 15rpx;
}

.image-item {
  width: 100%;
  background-color: #fdfaf0;
}

image {
  width: 200rpx;
  height: 200rpx;
  margin: 10rpx;
}
</style>
